import React, { Component } from 'react'
import PropTypes from 'prop-types'
import {nanoid} from 'nanoid'
import './index.css'

export default class Header extends Component {
  // 对接受的props进行:类型 必要性的校验
  static propTypes = {
    addTodo:PropTypes.func.isRequired
  }


  handleKeyUp = (e) => {
    // 解构赋值
    const { keyCode, target } = e
    const { addTodo } = this.props
    // 判断敲下的是否是回车键 回车键编码为13
    if (keyCode !== 13) return
    // 添加的todo不能为空
    if (target.value.trim() === '') {
      return alert('输入不能为空')
    }
    // 准备好一个todo对象
    const todoObj = { id: nanoid(), name: target.value, done: false }
    // 将todo对象传递给App
    addTodo(todoObj)
    // 清空输入
    target.value=''
    
  }


	render() {
		return (
			<div className="todo-header">
        <input type="text" placeholder="请输入你的任务名称，按回车键确认" onKeyUp={ this.handleKeyUp}/>
			</div>
		)
	}
}
